<template>
  <div class="container">
    <el-row>
      <el-col :span="9">
        <el-input
          size="small"
          placeholder="用户名/手机号"
          v-model="searchStr"
          class="input-with-select"
        >
          <el-button
            @click="search"
            slot="append"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
      border
      stripe
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column
        prop="inviter"
        label="推荐人"
        width="150"
      ></el-table-column>
      <el-table-column prop="nickname" label="用户名" width="150">
      </el-table-column>
      <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            style="height:50px;width:50px;object-fit:cover;border-radius:50%;"
            :src="scope.row.avatar"
            alt=""
          />
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{
            scope.row.sex === 0 ? "未选择" : scope.row.sex === 1 ? "男" : "女"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="绑定手机号" width="150">
      </el-table-column>

      <el-table-column label="注册时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.created_at.date.split(".")[0] }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            @click="
              currentUser = scope.row.id;
              detailVisible = true;
            "
            type="primary"
            size="small"
            >详情</el-button
          >
          <el-button
            v-if="scope.row.is_freeze === 0"
            @click="userBan(scope.row.id, scope.$index, 1)"
            type="danger"
            size="small"
            >禁用</el-button
          >
          <el-button
            v-if="scope.row.is_freeze === 1"
            @click="userBan(scope.row.id, scope.$index, 0)"
            type="success"
            size="small"
            >解禁</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="table-bottom-bar">
      <div></div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        :background="true"
      >
      </el-pagination>
    </div>
    <user-detail @close="detailVisible = false" :id="currentUser" :visible="detailVisible"></user-detail>
  </div>
</template>

<script>
import { getUserList, userBan } from "@/api/user-mng";
import userDetail from './components/user-detail'
export default {
  name: "OrdinaryUser",
  data() {
    return {
      list: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      detailVisible: false,
      currentUser: null,
      restriction: 0
    };
  },
  watch: {},
  methods: {
    search() {
      this.getUserList(1);
    },
    userBan(id, index, ban) {
      userBan({ id, freeze: ban }).then(res => {
        if (res.code === 200) {
          this.list[index].is_freeze = ban;
        }
      });
    },
    getUserList(page) {
      getUserList({
        page,
        level: 0,
         condition: this.searchStr ? this.searchStr : null
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
          this.restriction = res.data.restriction;
        }
      });
    },
    handleCurrentChange(page) {
      this.getUserList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getUserList(1);
    this.changeSize();
  },
  components: {
    userDetail
  }
};
</script>

<style></style>
